<!-- 收费清单-->
<template>
    <div class="contenBox">
        <div class="leftTree">
          <!-- <el-tree
            :data="treeData"
            :highlight-current="true"
            :props="defaultProps"
          ></el-tree> -->
          <el-tree :data="treeData" :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

        </div>
        <div class="rightContent">
            
            <div class="rightTop">
                <el-card class="box-card">
                    <el-form
                        ref="form"
                        :model="formSearch"
                        label-width="43px"
                        :inline="true"
                    >
                        <el-form-item label="姓名">
                        <el-input
                            v-model="formSearch.name"
                            placeholder="请输入姓名"
                            style="width:120px"
                        ></el-input>
                        </el-form-item>
                        <el-form-item label="学年">
                            <el-input
                                v-model="formSearch.academicYear"
                                placeholder="请输入学年"
                                style="width:120px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="学号">
                            <el-input
                                v-model="formSearch.studentId"
                                placeholder="请输入学号"
                                style="width:120px"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="支付方式" label-width="70px">
                            <el-select
                                class="select"
                                v-model="formSearch.methodPayment"
                                placeholder="支付方式"
                                style="width:110px"
                            >
                                <el-option
                                v-for="item in payment"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否支付" label-width="70px">
                            <el-select
                                class="select"
                                v-model="formSearch.ifPay"
                                placeholder="请选择"
                                style="width:120px"
                            >
                                <el-option
                                v-for="item in zhifu"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="search">
                                <span
                                class="icon iconfont icon-chaxun"
                                style="font-size: 12px; font-weight: bold"
                                >查询</span
                                >
                            </el-button>
                            <el-button size="small" @click="reset" icon="el-icon-refresh"
                                >重置</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
            <div class="rightBottom">
              
                <el-card class="box-card">
                  <div class="add">
                    <el-button type="primary" @click="add">新增</el-button>
                  </div>
                    <!-- <el-button type="primary" size="small">
                        <span class="icon iconfont icon-tianjia" style="font-size:14px;">新增</span>
                    </el-button> -->
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column type="index" label="序号" width="80"> </el-table-column>
                        <el-table-column prop="name" label="姓名"> </el-table-column>
                        <el-table-column prop="academicYear" label="学年"> </el-table-column>
                        <el-table-column prop="studentId" label="学号"> </el-table-column>
                        <el-table-column prop="idNumber" label="证件号"> </el-table-column>
                        <el-table-column prop="methodPayment" label="支付方式">
                          <template slot-scope="scope">
                                <span>{{scope.row.methodPayment == '0' ? '线上支付' : '线下支付'}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作"
                            width="120">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="seePlan(scope.row.id)">查看详细</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="queryParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </el-card>
            </div>
        </div>
        <el-dialog
          title="学年"
          :visible.sync="yearFlag"
          width="1000"
          class="schooleYear"
          >
          <el-form :model="ruleFormYear" :rules="ruleFormYearRules" ref="ruleFormYear" label-width="100px" class="demo-ruleForm">
            <el-form-item label="请选择开始学年" prop="academicYear">
            <el-select
                v-model="ruleFormYear.academicYear"
                placeholder="请选择开始学年"
              >
                <el-option
                  v-for="item in bignSchoolYearOptions"
                  :key="item.id"
                  :label="item.beginDate"
                  :value="item.beginDate"
                >
                </el-option>
              </el-select>
            </el-form-item>
              -
            <el-form-item label="请选择结束学年" prop="endYear">

              <el-select
                v-model="ruleFormYear.endYear"
                placeholder="请选择开始学年"
              >
                <el-option
                  v-for="item in endYearOptions"
                  :key="item.id"
                  :label="item.beginDate"
                  :value="item.beginDate"
                >
                </el-option>
              </el-select>
            </el-form-item>
            
          </el-form>
          <div class="footer">
            <el-button style="margin-top:10px;width:200px;" @click="submitForm('ruleFormYear')">确定</el-button>
            <el-button style="margin-top:10px;width:200px;" @click="resetForm()">取消</el-button>
          </div>
        </el-dialog>
    </div>
</template>
<script>
// import { getClassifyTreeListApi } from "@/api/basics/classify";
import {
  leftTreeListApi
} from "@/api/graduation/thegraduate.js"
import {
  getchargeListApi
} from "@/api/finance/chargelist.js"
import {
  getSchoolYearApi
} from "@/api/educational/schoolYear";
export default {
  data() {
    return {
      // 左侧树模拟数据
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label" || "majorName"
      },
      //搜索
      formSearch: {},
      bignSchoolYearOptions:[],
      endYearOptions:[],
      yearFlag:false,
      ruleFormYear:{
        endYear:"",
        academicYear:""
      },
      ruleFormYearRules:{
        academicYear:[{ required: true, message: '请选择开始学年', trigger: 'blur' }],
        endYear:[{ required: true, message: '请选择结束学年', trigger: 'blur' }],
      },
      //表格数据
      tableData: [
        // {id:1,name:'王楠',schoolYear:'2012学年',studentId:'121231',certificate:'3121254255411',payment:'线上支付'},
        // {id:2,name:'田佳鑫',schoolYear:'2013学年',studentId:'2511512',certificate:'56415321112',payment:'线下支付'},
        // {id:3,name:'张磊',schoolYear:'2014学年',studentId:'5218451',certificate:'3121254255411',payment:'线上支付'},
        // {id:4,name:'田晓',schoolYear:'2022学年',studentId:'8554551',certificate:'3121254255411',payment:'线下支付'},
        // {id:5,name:'张英',schoolYear:'2021学年',studentId:'8415148',certificate:'56415321112',payment:'线下支付'},
        // {id:6,name:'张鑫',schoolYear:'2012学年',studentId:'121231',certificate:'3121254255411',payment:'线上支付'},
        // {id:7,name:'赵天',schoolYear:'2013学年',studentId:'121231',certificate:'3121254255411',payment:'线下支付'},
        // {id:8,name:'赵斌',schoolYear:'2014学年',studentId:'121231',certificate:'56415321112',payment:'线上支付'},
        // {id:9,name:'王东',schoolYear:'2025学年',studentId:'121231',certificate:'3121254255411',payment:'线下支付'},
        // {id:10,name:'邹诗函',schoolYear:'2036学年',studentId:'121231',certificate:'56415321112',payment:'线上支付'},
      ],
      //分页
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0, //总条数,
      sex: [],
      payment:[
        {id:'1',label:'线上支付'},
        {id:'2',label:'线下支付'},
      ],
      zhifu:[
        {id:1,label:'是'},
        {id:0,label:'否'}
      ],
      // classifyTreeList: [],
      leftTreeColleageId:'', // 默认学院id
      leftTreeClassId:'',
      leftTreeMajorId:'',
      currentPage:1,
      id:"",
      academicYear:'',
      endYear:''
    };
  },
  mounted() {
    // getClassifyTreeListApi().then(res => {
    //   // console.log(res);
    //   this.sex = res.data[0].children;
    //   this.classifyTreeList = Array(res.data[2]);
    //   console.log(this.classifyTreeList,'左侧树----');
    // });

    leftTreeListApi().then(res=>{
      if(res.code === 200) {
        console.log(res);
        this.treeData = res.data
        res.data.forEach(item=>{
          console.log(item);
          if(item.children && item.children.length > 0) {
            console.log(item);
          // console.log(item,'-----shu');
            item.children.forEach(ite=>{
              ite.label = ite.majorName
              if(ite.children.length > 0) {
                ite.children.forEach(it=>{
                  it.label = it.className
                })
              }
            })
          }
        })
        console.log(this.treeData);
        this.leftTreeColleageId = res.data[0].id
      }
    })
    // this.getchargeList({college:'新开学院',major:'新开专业',clbum:'新开班级'})

    this.getchargeList()
    getSchoolYearApi().then(res=>{
      console.log(res);
      this.bignSchoolYearOptions = res.rows
      this.endYearOptions = res.rows
    })
  },
  methods: {
    submitForm() {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
            // alert('submit!');
            console.log(this.leftTreeColleageId);
            console.log(this.leftTreeMajorId);
            console.log(this.leftTreeClassId);
            console.log(this.ruleFormYear);
            let obj = {
              leftTreeColleageId:this.leftTreeColleageId,
              leftTreeMajorId:this.leftTreeMajorId,
              leftTreeClassId:this.leftTreeClassId,
              academicYear:this.ruleFormYear.academicYear,
              endYear:this.ruleFormYear.endYear
            }
            // let obj = {
            //   academicYear:this.academicYear,
            //   endYear:this.endYear
            // }
            sessionStorage.setItem('obj',JSON.stringify(obj))
            this.$router.push({
              path:`/finance/Plandetail`
            })
            // this.$router.push({
            //   path:`/finance/Plandetail/${this.leftTreeColleageId ? this.leftTreeColleageId : ' '}/${this.leftTreeMajorId ? this.leftTreeMajorId : ' '}/${this.leftTreeClassId ? this.leftTreeClassId : ' '}/${this.id}/s`
            // })
            // this.$router.push({
            //   path:`/finance/Plandetail/
            //   ${this.leftTreeColleageId ? this.leftTreeColleageId : ''}
            //   /${this.leftTreeMajorId ? this.leftTreeMajorId : ''}
            //   /${this.leftTreeClassId ? this.leftTreeClassId : ''}
            //   /${this.id ? this.id : ''}
            //   /${this.ruleFormYear.academicYear.label ? this.ruleFormYear.academicYear.label : ''}
            //   /${this.ruleFormYear.endYear.label ? this.ruleFormYear.endYear.label : ''}`
            // })
          // } else {
          //   console.log('error submit!!');
          //   return false;
          // }
        // });
      },
      resetForm() {
        this.ruleFormYear = {}
        this.yearFlag = false
      },
      handleClose() {},
    // 列表
    getchargeList(obj) {
      getchargeListApi({...obj,pageSize:"10",pageNum:this.currentPage}).then(res=>{
        console.log(res);
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
        }
      })
    },


    // 连线上环境查看name  id改成name
    handleNodeClick(data) {
      console.log(data);
      if(data.id) {
        this.leftTreeColleageId = data.label
        this.getchargeList({college:data.label})
      }else if(data.majorId && data.colleageId && !data.classId){
        console.log(2222);
        this.leftTreeMajorId = data.majorName
        this.leftTreeColleageId = data.colleageName
        this.getchargeList({college:data.colleageId,major:data.majorId})
      }else if(data.classId && data.majorId && data.colleageId){
        this.leftTreeClassId = data.classId
        this.leftTreeMajorId = data.majorId
        this.leftTreeColleageId = data.colleageId
        this.getchargeList({college:data.colleageId,major:data.majorId,clbum:data.classId})

      }
    },
    // 新增
    add() {
      console.log(this.leftTreeClassId);
      console.log(this.leftTreeMajorId);
      console.log(this.leftTreeColleageId);
      this.yearFlag = true
      sessionStorage.removeItem("detailId")
      // this.$router.push({
      //   path:`/finance/Plandetail`
      // })
    },
    //分页
    handleSizeChange(val) {
      this.queryParams.pageSize = val
    //   this.getList()
    },
    handleCurrentChange() {
      // this.queryParams.pageNum = val
      this.getchargeList()
    },
    reset(){
        this.formSearch = {}
        this.getchargeList()
    },
    search(){
      this.getchargeList(this.formSearch)
    },
    seePlan(id){
      console.log(id);
      sessionStorage.setItem('detailId',id)
      this.$router.push({
        path:`/finance/Plandetail`
      })
    }
  }
};
</script>
<style lang="scss" scoped>
.contenBox {
  // min-width: calc(100vh - 200px);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f3f2f7;
  padding: 0 20px 20px 15px;
  box-sizing: border-box;

  .leftTree {
    width: 250px;
    // height: 100%;
    // overflow-y: auto;
    // min-height:calc(100vh - 95px);
    background-color: #fff;
    // padding: 15px 15px;
    border-radius: 5px;
    box-sizing: border-box;

    // .tac{
    //   width: 300px;

    //   ::v-deep .el-col-12{
    //     min-height:calc(100vh - 220px);
    //     height: 500px;
    //     overflow-y: auto;
    ::v-deep .el-tree {
      width: 250px;
    }
    ::v-deep .el-tree > .el-tree-node .el-tree-node__content {
      height: 56px;
      position: relative;
      .el-tree-node__expand-icon {
        position: absolute;
        right: 0;
        bottom: 14px;
        transform: rotate(-90deg);
        font-size: 18px;
      }
      .el-tree-node__label {
        font-size: 16px;
        margin-left: 10px;
      }
      .el-tree-node__expand-icon.expanded {
        transform: rotate(0deg);
      }

      .el-icon-caret-right:before {
        content: "\e6df";
      }
    }

    ::v-deep.el-menu {
      border: none;
    }

    // ::v-deep .el-submenu.is-active .el-submenu__title {
    //   color: #409eff;
    // }

    // ::v-deep .el-submenu .el-menu-item {
    //   height: 40px;
    //   line-height: 40px;
    // }

    // ::v-deep .el-menu-item.is-active {
    //   border-right: solid 2px #409eff;
    // }

    // ::v-deep .el-submenu__icon-arrow {
    //   transform: rotateZ(-90deg);
    //   font-size: 16px;
    // }

    // ::v-deep .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
    //   transform: rotateZ(0deg);
    //   color: #409eff;
    // }

    // ::v-deep .el-submenu.is-opened .el-submenu__title {
    //   color: #409eff;
    // }
  }

  .rightContent {
    flex: 1;
    min-width: calc(100vh - 250px);
    // width: 100%;
    margin-left: 15px;
    padding-right: 10px;
    // background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;

    .rightTop {
      width: 100%;
      .el-card {
        height: 100%;
      }
    }

    .rightBottom {
      margin-top: 20px;
      box-sizing: border-box;
      // height: 400px;
      // overflow-y: auto;

      .edit {
        cursor: pointer;
        margin-right: 15px;
      }
      .del {
        cursor: pointer;
      }

      .pagination {
        display: flex;
        align-items: center;
        justify-content: right;
        margin-top: 20px;
        margin-right: 20px;

        .jumper {
          font-size: 14px;
          margin-left: 20px;
          margin-right: 10px;
          display: flex;
          align-items: center;
        }

        ::v-deep .btn-prev,
        ::v-deep .btn-next,
        button {
          height: 28px;
          line-height: 28px;
          border-radius: 5px;
          font-size: 14px;
          padding: 0 8px;
          border: solid 1px #e6e6e6;
        }

        .submit {
          color: #fff;
          background-color: #4895db;
          border: solid 1px #4895db;
        }
      }
    }
  }
  ::v-deep .demo-ruleForm .el-form-item{
    display: flex;
    justify-content: center;
    .el-form-item__label{
      width: 130px !important;
    }
    .el-form-item__content{
      margin-left: 0 !important;
    }
  }
  .schooleYear .el-dialog__body .footer{
    text-align: center;
  }
}
</style>
